<template>
	<div class="SMgoodsadd-hotel">
		<div class="my-app">
			<h2 class="my-h2">商品管理 / 添加产品</h2>
			<div class="info-con">
				<div class="colmn  my-form-item">
					<div class="row">
						<h3 class="my-h3c">上传酒店轮播图（限5张）</h3>
						<div class="body-bor text-body-bor">
							<el-upload drag action="" multiple :auto-upload="false" :limit="5" :file-list="fileList2" list-type="picture-card"
							 :on-change="rChartchange" :on-exceed="onexceed" :on-remove="handleRemove">
								<img class="upload-icon" v-if="upload_five" src="../../../assets/img/sys/upload.png" />

							</el-upload>
							<el-dialog drag :visible.sync="dialogVisible">
								<img width="100%" :src="dialogImageUrl" alt="">
							</el-dialog>
						</div>
					</div>
					<div class="row">
						<h3 class="my-h3c">上传酒店封面（限1张）</h3>
						<div class="body-bor text-body-bor uploadone">
							<el-upload drag action="" :auto-upload="false" list-type="picture-card" :on-change="coverchange">
								<img width="100%" :src="uploadone" alt="" v-if="upload_one">
								<img class="upload-icon" v-else src="../../../assets/img/sys/upload.png" />

							</el-upload>
						</div>
					</div>
				</div>
				<div class="my-form-item">
					<div class="hotel">
						<div class="body-bor">
							<goods-add class="hotel-add"></goods-add>
						</div>
					</div>
					<div class=" ">
						<h3 class="solt-tit my-h3c">房间设施</h3>
						<div class="body-bor text-body-bor">
							<textarea class="my_editor" id="other_room_introduce" v-model="other_room_introduce"></textarea>

						</div>
					</div>
				</div>

			</div>
			<div class="my-button">
				<el-button class="submit" @click="AddHotelPrice">提交</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';

	import GoodsAdd from "../../../components/GoodsAdd.vue";

	export default {
		data() {
			return {
				other_room_introduce: "",
				id: this.$route.query.id,
				value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
				fileList2: [],
				sceniclist: [],
				upload_one: false,
				uploadone: "",
				upload_five: true,
				radio: '1',
				addAduilList: {
					row: 1,
					list: [{
						label: "结束时间",
						name: "",
						tiempicker: true,
						tiemval: "",
					}, {
						label: "开始时间",
						name: "",
						tiempicker: true,
						tiemval: "",
					}, ]
				},
				AdultList: [{
						label: "价格类型",
						name: "",
						text: "price_type",
						elradiostatus: true,
						disabled: false,
						elradio: {
							radio: 1,
							list: ["默认价格", "活动价格"],
							label: [1, 2]
						},
					}, {
						label: "开始时间",
						name: "",
						text: "start_time",
						show: false,
						tiempicker: true,
						tiemval: "",
					},
					{
						label: "结束时间",
						name: "",
						show: false,
						text: "end_time",
						tiempicker: true,
						tiemval: "",
					},
					{
						label: "房型分类",
						selectoptionsta: true,
						text: "type",
						selectoption: {
							value: "",
							list: [
								"单人房",
								"三人房",
								"双人房",
								"大床房",
							]
						}
					},
					{
						label: "房间名称",
						name: "",
						textsta: true,
						text: "room_name",
						maxlength: 8,
						buttonStart: false,
						buttonText: "",
						showpassword: false
					},
					{
						label: "门市价格",
						name: "",
						textsta: true,
						text: "room_listing_price",
						buttonStart: false,
						buttonText: "",
						showpassword: false
					},
					{
						label: "会员价格",
						text: "room_membership_price",
						name: "",
						textsta: true,
					},
					{
						label: "结算价格",
						text: "room_settlement_price",
						name: "",

						textsta: true,
					},
					{
						label: "入住人数",
						text: "people_number",
						name: "",
						textsta: true,
					},
					{
						label: "能否加床",
						name: "",
						text: "extra_bed",
						elradiostatus: true,
						disabled: false,
						elradio: {
							radio: '',
							list: ["是", "否"],
							label: [1, 2]
						},
					},
					{
						label: "加床费用",
						name: "",
						textsta: true,
						show: false,
						text: "extra_bed_price",
					},
					{
						label: "退订条件",
						name: "",
						text: "refund_condition",
						text: "refund",
						elradiostatus: true,
						disabled: false,
						elradio: {
							radio: '',
							list: ["是", "否"],
							label: [1, 2]
						},
					},
					{
						label: "no",
						name: "",
						text: "refund_condition",
						elradiostatus: true,
						disabled: false,
						elradio: {
							radio: '',
							list: ["入住前12小时退订，按房价金额退50%", "入住前24小时退订，退还全部房价金额"],
							label: [1, 2]
						},
					},
					{
						label: "包含早餐",
						name: "",
						text: "breakfast",
						elradiostatus: true,
						disabled: false,
						elradio: {
							radio: '',
							list: ["是", "否"],
							label: [1, 2]
						},
					},
					{
						label: "网络WiFi",
						name: "",
						text: "network",
						elradiostatus: true,
						disabled: false,
						elradio: {
							radio: '',
							list: ["是", "否"],
							label: [1, 2]
						},
					},
					{
						label: "是否无烟",
						name: "",
						text: "smoke",
						elradiostatus: true,
						disabled: false,
						elradio: {
							radio: '',
							list: ["是", "否"],
							label: [1, 2]
						},
					},
					{
						label: "是否上架",
						name: "",
						text: "status",
						elradiostatus: true,
						elradio: {
							radio: "",
							list: ["上架产品", "下架产品"],
							label: [1, 2]
						},
					},
				],
				isIndeterminate: true,

				dialogImageUrl: '',
				dialogVisible: false,
				HotelPrice: {
					token: "", //	String	 header传入
					status: '', //	Number	 1上架,2下架 允许值: 1, 2
					price_type: "", //	Number	 1默认价格,2活动价格 允许值: 1, 2
					end_time: "", // String 介绍时间（ 默认价格为 ''）
					type: "", // String 房间分类
					room_name: "", // String 房间名称
					room_listing_price: "", // Number 房间门市价
					room_membership_price: "", // Number 房间会员价
					room_settlement_price: "", // Number 房间结算价
					breakfast: "", // Number 是否含早1含， 2 不含 允许值: 1, 2
					network: "", // Number 是否有宽带1有， 2 没有 允许值: 1, 2
					people_number: "", // Number 可住人数
					extra_bed: "", // Number 是否能加床1能， 2 不能 允许值: 1, 2
					extra_bed_price: "", // Number 加床费用
					refund: "", // Number 是否能退订1能， 2 不能 允许值: 1, 2
					refund_condition: "", // String 退订条件
					smoke: "", // Number 是否无烟1是， 2 不是 允许值: 1, 2
					other_room_introduce: "", // String 便利设施
					room_pic: "", // Array 房间图片
					face: "", // string 房间封面图片
				}
			}
		},
		beforeRouteLeave(to, from, next) {
			// 导航离开该组件的对应路由时调用
			// 可以访问组件实例 `this`
			next();
		},
		computed: {
			...mapGetters([
				'token',
				'LabelInput',
				'pcAddHotelPrice',
				'edit_productList',
			])
		},
		components: {
			GoodsAdd,
		},
		created() {
			this.getPcAddHotelPrice(this.HotelPrice)
			this.setLabelInput(this.AdultList)
			let req_HotelPrice = JSON.parse(JSON.stringify(this.pcAddHotelPrice)); //this.templateData是父组件传递的对象
			this.AdultList[1].show = true;
			this.AdultList[2].show = true;
			req_HotelPrice.start_time = "";
			req_HotelPrice.end_time = "";
			req_HotelPrice['price_type'] = 1;
			this.getPcAddHotelPrice(req_HotelPrice)
		},
		mounted() {
			if (this.id != undefined) {
				if (this.edit_productList.price_type === 1) {
					this.AdultList[1].show = true;
					this.AdultList[2].show = true;
				}
				if (this.edit_productList.extra_bed === 2) {
					this.AdultList[10].show = true;
				}
				if (this.edit_productList.refund === 2) {
					this.AdultList[12].disabled = true
				}
				this.sceniclist = this.edit_productList.room_pic;
				for (var i = 0; i < this.sceniclist.length; i++) {
					this.fileList2.push({
						url: "http://www.ddmzj.com" + this.sceniclist[i]
					})
				}
				// 封面图片
				this.uploadone = "http://www.ddmzj.com" + this.edit_productList.face;
				this.upload_one = true;
				this.AdultList[0].elradio.radio = this.edit_productList.price_type; //价格类型：
				this.AdultList[0].pointerevents = true; //价格类型：
				this.AdultList[1].tiemval = this.edit_productList.start_time; //开始时间
				this.AdultList[2].tiemval = this.edit_productList.end_time; //结束时间
				this.AdultList[3].selectoption.value = this.edit_productList.type; //房型分类
				this.AdultList[3].pointerevents = true; //房间名称：
				this.AdultList[4].name = this.edit_productList.room_name; //房间名称
				this.AdultList[4].pointerevents = true; //房间名称：
				this.AdultList[5].name = this.edit_productList.room_listing_price; //门市价格
				this.AdultList[6].name = this.edit_productList.room_membership_price; //会员价格
				this.AdultList[7].name = this.edit_productList.room_settlement_price; //结算价格
				this.AdultList[7].pointerevents = true; //房间名称：
				this.AdultList[8].name = this.edit_productList.people_number; //入住人数
				this.AdultList[8].pointerevents = true; //房间名称：
				this.AdultList[9].elradio.radio = this.edit_productList.extra_bed; //能否加床：
				this.AdultList[9].pointerevents = true; //房间名称：
				this.AdultList[10].name = this.edit_productList.extra_bed_price; //加床费用：
				this.AdultList[10].pointerevents = true; //房间名称：
				this.AdultList[11].elradio.radio = this.edit_productList.refund; //退订条件：
				this.AdultList[11].pointerevents = true; //房间名称：
				this.AdultList[12].elradio.radio = this.edit_productList.refund_condition; //退订条件
				this.AdultList[12].pointerevents = true; //房间名称：：
				this.AdultList[13].elradio.radio = this.edit_productList.breakfast; //包含早餐：
				this.AdultList[13].pointerevents = true; //房间名称：
				this.AdultList[14].elradio.radio = this.edit_productList.network; //网络WiFi：
				this.AdultList[14].pointerevents = true; //房间名称：
				this.AdultList[15].elradio.radio = this.edit_productList.smoke; //是否无烟：
				this.AdultList[15].pointerevents = true; //房间名称：
				this.AdultList[16].elradio.radio = this.edit_productList.status; //是否上架：
				this.other_room_introduce = this.edit_productList.other_room_introduce;
				var HotelPrice = {
					id: this.id,
					status: this.edit_productList.status, //	Number	 1上架,2下架 允许值: 1, 2
					price_type: this.edit_productList.price_type, //	Number	 1默认价格,2活动价格 允许值: 1, 2
					end_time: this.edit_productList.end_time, // String 介绍时间（ 默认价格为 ''）
					start_time: this.edit_productList.start_time, // String 介绍时间（ 默认价格为 ''）
					type: this.edit_productList.type, // String 房间分类
					room_name: this.edit_productList.room_name, // String 房间名称
					room_listing_price: this.edit_productList.room_listing_price, // Number 房间门市价
					room_membership_price: this.edit_productList.room_membership_price, // Number 房间会员价
					room_settlement_price: this.edit_productList.room_settlement_price, // Number 房间结算价
					breakfast: this.edit_productList.breakfast, // Number 是否含早1含， 2 不含 允许值: 1, 2
					network: this.edit_productList.network, // Number 是否有宽带1有， 2 没有 允许值: 1, 2
					people_number: this.edit_productList.people_number, // Number 可住人数
					extra_bed: this.edit_productList.extra_bed, // Number 是否能加床1能， 2 不能 允许值: 1, 2
					extra_bed_price: this.edit_productList.extra_bed_price, // Number 加床费用
					refund: this.edit_productList.refund, // Number 是否能退订1能， 2 不能 允许值: 1, 2
					refund_condition: this.edit_productList.refund_condition, // String 退订条件
					smoke: this.edit_productList.smoke, // Number 是否无烟1是， 2 不是 允许值: 1, 2
					other_room_introduce: this.edit_productList.other_room_introduce, // String 便利设施
					room_pic: this.edit_productList.room_pic, // Array 房间图片
					face: this.edit_productList.face, // string 房间封面图片
				}
				this.getPcAddHotelPrice(HotelPrice)
			}

			this.tinymce()
		},

		beforeDestroy() {
			this.$tinymce.remove()
		},
		methods: {
			...mapActions({
				setLabelInput: "setLabelInput",
				getPcAddHotelPrice: 'getPcAddHotelPrice',
				getSidebarNavIndex: 'getSidebarNavIndex'
			}),
			tinymce() {
				var _this = this;
				_this.$tinymce.baseURL = '/static/tinymce'
				_this.$tinymce.init({
					selector: '#other_room_introduce',
					language_url: '../../../../static/tinymce/zh_CN.js',
					language: 'zh_CN',
					init_instance_callback: function(editor) {
						editor.on('keyup', () => {
							_this.other_room_introduce = editor.getContent();
						});
					}
				}).then(resolve => {
					resolve[0].setContent(_this.other_room_introduce)
				});
			},
			AddHotelPrice() {
				if (this.pcAddHotelPrice.price_type === "") //	Number	 1默认价格,2活动价格 允许值: 1, 2
				{
					this.$alert('请选择价格类型', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if (this.pcAddHotelPrice.price_type === 2) {

					if (this.pcAddHotelPrice.start_time === "") // String 房间分类
					{
						this.$alert('请选择开始时间', '提示', {
							confirmButtonText: '确定',
						});
						return;
					}
					if (this.pcAddHotelPrice.end_time === "") // String 房间分类
					{
						this.$alert('请选择结束时间', '提示', {
							confirmButtonText: '确定',
						});

						return;
					}
				}
				if (this.pcAddHotelPrice.type === "") // String 房间分类
				{
					this.$alert('请选择房间分类', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if (this.pcAddHotelPrice.room_name === "") // String 房间名称
				{
					this.$alert('请输入房间名称', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if (this.pcAddHotelPrice.room_listing_price === "") // Number 房间门市价
				{
					this.$alert('请输入房间门市价', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if (this.pcAddHotelPrice.room_membership_price === "") // Number 房间会员价
				{
					this.$alert('请输入房间会员价', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if (this.pcAddHotelPrice.room_settlement_price === "") // Number 房间结算价
				{
					this.$alert('请输入房间结算价', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if (this.pcAddHotelPrice.breakfast === "") // Number 是否含早1含， 2 不含 允许值: 1, 2
				{
					this.$alert('是否含早', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if (this.pcAddHotelPrice.network === "") // Number 是否有宽带1有， 2 没有 允许值: 1, 2
				{
					this.$alert('是否有宽带', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if (this.pcAddHotelPrice.people_number === "") // Number 可住人数
				{
					this.$alert('可住人数', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if (this.pcAddHotelPrice.extra_bed === "") // Number 是否能加床1能， 2 不能 允许值: 1, 2
				{
					this.$alert('是否能加床', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if (this.pcAddHotelPrice.extra_bed === 1) // Number 是否能加床1能， 2 不能 允许值: 1, 2
				{

					if (this.pcAddHotelPrice.extra_bed_price === "") // Number 加床费用
					{
						this.$alert('加床费用', '提示', {
							confirmButtonText: '确定',
						});
						return;
					}
				}
				if (this.pcAddHotelPrice.refund === "") // Number 是否能退订1能， 2 不能 允许值: 1, 2
				{
					this.$alert('请选择价格类型', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if (this.pcAddHotelPrice.refund === 1) {
					if (this.pcAddHotelPrice.refund_condition === "") // String 退订条件
					{
						this.$alert('退订条件', '提示', {
							confirmButtonText: '确定',
						});
						return;
					}
				}
				if (this.pcAddHotelPrice.smoke === "") // Number 是否无烟1是， 2 不是 允许值: 1, 2
				{
					this.$alert('是否无烟', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if (this.pcAddHotelPrice.room_pic === "") // Array 房间图片
				{
					this.$alert('房间图片', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if (this.pcAddHotelPrice.face === "") // string 房间封面图片
				{
					this.$alert('房间封面图片', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				let req_HotelPrice = JSON.parse(JSON.stringify(this.pcAddHotelPrice)); //this.templateData是父组件传递的对象
				req_HotelPrice["token"] = this.token;
				req_HotelPrice.other_room_introduce = this.other_room_introduce;
				if (this.id === undefined)
					delete req_HotelPrice["id"]
				this.getPcAddHotelPrice(req_HotelPrice)

				this.$api.GetpcAddHotelPrice(this.pcAddHotelPrice)
					.then(res => {
						this.$alert(res.meg, '提示', {
							confirmButtonText: '确定',
							callback: action => {
								if (res.code === 200) {
									this.$router.push("/SGgoodsselect")
									this.getSidebarNavIndex("SGgoodsselect")
								}
							}
						});

					})
			},
			rChartchange(file, fileList) {
				let _this = this;
				let req_pcAdd = "";
				req_pcAdd = JSON.parse(JSON.stringify(_this.pcAddHotelPrice)); //this.templateData是父组件传递的对象
				var windowURL = window.URL || window.webkitURL;
				_this.param = new FormData();
				_this.param.append('images', file.raw, file.name);
				this.$api.uploadHotel(_this.param, _this.token, function(data) {
					_this.sceniclist.push(data.url);
					_this.fileList2.push({
						url: "http://www.ddmzj.com" + data.url
					});
					if (fileList.length === 5) {
						_this.upload_five = false;
					}
					req_pcAdd.room_pic = _this.sceniclist;
					_this.getPcAddHotelPrice(req_pcAdd)
				});
			},

			coverchange(file, fileList) {
				let _this = this;
				let req_pcAdd = "";
				req_pcAdd = JSON.parse(JSON.stringify(_this.pcAddHotelPrice)); //this.templateData是父组件传递的对象
				var windowURL = window.URL || window.webkitURL;
				_this.param = new FormData();
				_this.param.append('images', file.raw, file.name);
				this.$api.uploadHotelFace(_this.param, _this.token, function(data) {
					req_pcAdd.face = data.url;
					_this.uploadone = "http://www.ddmzj.com" + data.url;
					_this.upload_one = true;
					_this.getPcAddHotelPrice(req_pcAdd)

				});
			},
			onexceed(files, fileList) {
				this.$alert('最多上传5张轮播图', '提示', {
					confirmButtonText: '确定',
				});
			},
			handleRemove(file, fileList) {
				this.fileList2 = fileList;
				var req_pcAdd; //this.templateData是父组件传递的对象
				this.upload_five = true;
				req_pcAdd = JSON.parse(JSON.stringify(this.pcAddHotelPrice)); //this.templateData是父组件传递的对象
				this.sceniclist = [];
				var reg = new RegExp("http://www.ddmzj.com","g");
				for (var i = 0; i < this.fileList2.length; i++) {
					this.sceniclist.push(this.fileList2[0].url.replace(reg,""));
				}
				req_pcAdd.room_pic = this.sceniclist;
				this.getPcAddHotelPrice(req_pcAdd)
			},
			getchangetext(res) {
				let req_HotelPrice = JSON.parse(JSON.stringify(this.pcAddHotelPrice)); //this.templateData是父组件传递的对象
				if (res.text === "type") {
					req_HotelPrice[res.text] = res.selectoption.value;
				} else {
					req_HotelPrice[res.text] = res.name;
				}
				this.getPcAddHotelPrice(req_HotelPrice)
			},
			gettimepicker(res) {
				let req_HotelPrice = JSON.parse(JSON.stringify(this.pcAddHotelPrice)); //this.templateData是父组件传递的对象
				req_HotelPrice[res.text] = res.tiemval;
				this.getPcAddHotelPrice(req_HotelPrice)
			},
			getsondata_radio(res) {
				let req_HotelPrice = JSON.parse(JSON.stringify(this.pcAddHotelPrice)); //this.templateData是父组件传递的对象
				for (var i = 0; i < this.AdultList.length; i++) {
					if (this.AdultList[i].text === res.text) {
						this.AdultList[i] = res;
						if (res.text === "refund") {
							if (res.elradio.radio === 1) {
								this.AdultList[i + 1].disabled = false;
							}
							if (res.elradio.radio === 2) {
								this.AdultList[i + 1].disabled = true;
								req_HotelPrice.refund_condition = "";
							}
						}
					}
				}

				if (res.text === "extra_bed") {
					if (res.elradio.radio === 1) {
						this.AdultList[10].show = false;
					}
					if (res.elradio.radio === 2) {
						this.AdultList[10].show = true;
						req_HotelPrice.extra_bed_price = "";
					}
				}
				if (res.text === "price_type") {
					if (res.elradio.radio === 1) {
						this.AdultList[1].show = true;
						this.AdultList[2].show = true;
						req_HotelPrice.start_time = "";
						req_HotelPrice.end_time = "";
					}
					if (res.elradio.radio === 2) {
						this.AdultList[1].show = false;
						this.AdultList[2].show = false;
					}
				}
				this.setLabelInput(this.AdultList)
				req_HotelPrice[res.text] = res.elradio.radio;
				this.getPcAddHotelPrice(req_HotelPrice)
			},
		},
	}
</script>

<style lang="less">
	.SMgoodsadd-hotel {
		text-align: left;

		.info-con {
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			border-bottom: 0;

			.solt-tit {
				padding: 5px 0;
				box-sizing: border-box;
			}


			.colmn {
				display: flex;
				justify-content: space-between;

				position: relative;
				&::after{
					content: "*图片大小不能超过10M";
					position: absolute;
					top: 10px;
					right: 10px;
					color: red;
				}
				.row {
					
					&:last-child {
						.body-bor {

							border-left: 2px solid #41c7db;
						}
					}

					.text-body-bor {
						img {
							width: 150px;
							height: 100%;
						}
					}

					.body-bor {
						margin: 25px 0;
						box-sizing: border-box;
						height: 330px;
					}

					&:first-child {
						width: 515px;
					}

					&:last-child {
						width: 343px;

						.body-bor {
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}

			.el-checkbox__input.is-checked+.el-checkbox__label {
				color: #333;
			}

			.el-checkbox__input.is-checked .el-checkbox__inner {}
		}


	}
</style>
